<style lang="scss" scoped>
.van-tab__text {
  font-size: 1.3rem !important;
}
</style>

<template>
  <van-tabs
    v-model:active="active"
    @click="onClickTabs"
    :color="getMasterColor"
    sticky
  >
    <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
      <case-list :caseList="caseList" :model="model"></case-list>
      <!-- <div v-if="caseList.length > 0" style="box-sizing: border-box">
        <van-button
          class="load-more color-l padding-all-m margB-l"
          style="box-sizing: border-box"
          v-if="finished == false"
          :loading="loading"
          @click="getCaseList"
          block
          >加载更多</van-button
        >
      </div> -->
      <!-- <div class="no-data color-l padding-all-m" v-if="finished">
        已经到底了
      </div> -->
      <!-- <div class="t-center" v-else>
        <van-loading size="24px">加载中...</van-loading>
      </div> -->

      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getCaseList"
      >
        
      </van-list> -->
    </van-tab>
  </van-tabs>
</template> 
<script>
// import { Loading } from 'vant';
import CaseList from "@/components/CaseList.vue";
import { mapGetters } from 'vuex'
export default {
  name: "CaseTabs",
  components: {
    CaseList,
  },
  props: {
    model: String,
  },
  computed:{
      ...mapGetters(['getMasterColor']),
  },
  data() {
    return {
      active: 0,
      mainColor: "#FF0000",
      tabList: [
        {
          id: "",
          name: "所有方案",
        },
        {
          id: 0,
          name: "活动报名",
        },
        {
          id: 1,
          name: "寒假活动",
        },
        {
          id: 2,
          name: "暑假活动",
        },
        {
          id: 3,
          name: "抽奖活动",
        },
        {
          id: 4,
          name: "小游戏活动",
        },
      ],
      caseList: [],
      loading: false,
      finished: false,
      pageNo: 1,
      pageSize: 10000,
      type_id: "",
    };
  },
  mounted() {
    const _this = this;
    const tabList = _this.$store.getters.getCaseTabsList;
    if (tabList.length > 0) {
      _this.tabList = tabList;
    } else {
      //调用接口获取tablist
      _this.getCaseType();
    }
    const caseList = this.$store.getters.getCaseList;
    _this.getCaseList();
    // if (caseList.length === 0) {
    //   _this.getCaseList();
    // } else {
    //   _this.caseList = caseList;
    // }
    const caseListFinished = _this.$store.getters.getCaseListFinished;
    _this.finished = caseListFinished;
    // const mainColor = _this.$store.getters.getMainColor;
    // if(mainColor){
    //   _this.mainColor = mainColor;
    // }else{
    //   //调用接口获取mainColor
    // }
  },
  methods: {
    getCaseType() {``
      let params = {
        pageNo: 1,
        pageSize: 1000,
      };
      this.$request.getCaseType(params).then((res) => {
        let tabList = res.data.data;
        let list = [];
        tabList.forEach((item) => {
          if (item.status == 1) {
            // console.log(item);
            list.push(item);
          }
        });
        this.tabList = list;
        this.tabList.unshift({
          id: 0,
          name: "全部",
        });
        this.$store.commit("setCaseTabsList", this.tabList);
      });
    },
    onLoad() {
      console.log("onLoad");
    },
    getCaseList() {
      const _this = this;
      let params = {
        type_id: _this.type_id,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
      };
      this.loading = true;
      let list = []
      _this.$request
        .getCaseList(params)
        .then((res) => {
          res.data.data.forEach(item => {
            if(item.model == this.model) {
              list.push(item)
            }
          })
          // console.log(list, '++++++++++list+++++++++++++');
          _this.caseList.push(...list)
          // _this.caseList.push(...res.data.data);
          // console.log(this.model, 'model+++++++++++++++++++++++++');
          console.log("_this.caseList.length", _this.caseList.length);
          console.log("res.data.totalCount", res.data.totalCount);
          if (_this.caseList.length >= res.data.totalCount) {
            _this.finished = true;
            _this.$store.commit("setCaseListFinished", true);
          } else {
            _this.pageNo++;
          }
          _this.$store.commit("setCaseList", _this.caseList);
        })
        .finally((res) => {
          this.loading = false;
        });
    },
    onClickTabs(index) {
      const _this = this;
      _this.type_id = _this.tabList[index].id;
      _this.pageNo = 1;
      _this.caseList = [];
      _this.finished = false;
      _this.getCaseList();
      // this.caseList = this.$store.getters.getCaseList
      // this.$emit("tabClick", index)
      // 请求接口获取对应的caseList
    },
  },
};
</script>
